import React, { useState } from 'react'
import { Animated, View, Text, StyleSheet, TouchableWithoutFeedback,StyleProp,ViewStyle } from 'react-native';
import Icon from '../Icon'

type Props = {
  value?: string,
  label?: string,
  checked?: boolean,
  onPress?: (value: string) => void,
  onChange?: (value: boolean) => void,
  disabled?: boolean,
  activeIcon?: React.ReactElement<{}>,
  inactiveIcon?: React.ReactElement<{}>,
  rightIcon?: boolean,
  checkedColor?: string,
  style?: StyleProp<ViewStyle>;
}
const Checkbox = ({
  onPress,
  onChange,
  disabled,
  activeIcon,
  inactiveIcon,
  rightIcon,
  checkedColor,
  ...rest }: Props) => {
  return (
    <TouchableWithoutFeedback
      disabled={disabled}
      testID="Radio"
      onPress={onPress && (() => onPress(rest.value || ''))
        || onChange && (() => onChange(!rest.checked))}>
      <View style={[styles.radio, disabled && styles.disabled,rest.style]}>
        {rightIcon && <Text>{rest.label}</Text>}
        <Animated.View>
          {!rest.checked ?
            (inactiveIcon ? inactiveIcon : <Text style={styles.checkBox}></Text>)
            :
            (activeIcon ? activeIcon : <Icon name="checkcircle" size={20} color={checkedColor || "#61649f"}></Icon>)}
        </Animated.View>
        {!rightIcon && <Text>{rest.label}</Text>}
      </View>
    </TouchableWithoutFeedback>
  )
}
const styles = StyleSheet.create({
  radio: {
    flexDirection: 'row',
    alignItems: 'center',
    paddingTop: 8,
    minWidth: 80,
    width: 80,
  },
  checkBox: {
    borderWidth: 2,
    borderColor: '#333',
    width: 20,
    height: 20,
    borderRadius: 10,
    overflow: 'hidden',
  },
  disabled: {
    opacity: 0.5,
  },
})
export default Checkbox